<template>
  <div id="app">
    <div id="topBar">
      <span @click="displayPop()">
        <router-link to="/pop"> {{ topNavText[status] }}</router-link>
      </span>
    </div>
    <header class="center">
      <headerNav @passData="passData"></headerNav>
    </header>
    <main class="center container clear">
      <router-view
        class="pop"
        @close="closePop"
        @passingStatus="updateStatus"
        ref="myDouban"
        :searchData='this.searchData'
      >
      </router-view>
    </main>
    <footer></footer>
    <div id="layer" v-show="ifPopShow"></div>
  </div>
</template>

<script>
import { Cookie } from "./until/Cookie";
import { Request } from "./until/request";
import "./assets/style/default.css";
import headerNav from "./components/headerNav";
import modifyBox from "./components/modifyBox";
import loginBox from "./components/loginBox";
import searchpage from "./components/searchpage";
import index from "./components/index";
export default {
  name: "App",
  data() {
    return {
      status: "unLogin",
      ifPopShow: false,
      topNavText: {
        login: "退出登录",
        unLogin: "登录/注册"
      },
      searchData:{}
    };
  },
  computed:{
    text:function (params) {
      // console.log(sessionStorage.getItem("login"))
    }
  },
  components: {
    loginBox,
    headerNav
  },
  mounted() {
    let cookie = document.cookie.split(";");
    // console.log()
    //登录流程
    //1.检测是否有cookie或者sessionstorage
    if (document.cookie != "" && cookie.includes(" login=true")) {
      let cookie = new Cookie();
      let data = cookie.getDatas();

      //2.从cookie中获取用户信息 发送登录请求
      //更新为登录模式

      this.request(data);
    } else if (
      sessionStorage.getItem("username") != null &&
      sessionStorage.getItem("login") != null
    ) {
      let data = {
        keys: ["username", "password"],
        values: []
      };

      data.values.push(
        sessionStorage.getItem("username"),
        sessionStorage.getItem("password")
      );
      console.log(data);
      this.request(data);
    }
  },
  methods: {
    //传递数据
    passData(data) {
      this.searchData=data;
    },
    //请求
    request(data) {
      let req = new Request();
      let formdata = req.addParams(data.keys, data.values);
      console.log(data);
      //发送请求
      req
        .send("post", `/api/api/login`, formdata)
        .then(res => {
          if (res.data.code == 200) {
            //1.在请求成功的回调函数中改变myDouban的状态
            // console.log( res.data.data.photo)
            // this.$refs.myDouban.changeStatus();
            //2.改变topbar的状态（改为退出登录）
            this.status = "login";
            
            //储存用户信息 方便其他组件使用
            sessionStorage.setItem('photo', res.data.data.photo)
            sessionStorage.setItem("userId", res.data.data.id);
            sessionStorage.setItem("username", formdata.get("username"));
            sessionStorage.setItem("password", formdata.get("password"));
          }
          // console.log(formdata.get("password"));

          //改变myDouban的状态为登录状态（isLogin:true）
        })
        .catch(err => {
          console.log(err);
        });
    },
    //由子组件调用 将App组件中的topbar改为login状态
    updateStatus(val) {
      //传来的val为true
      if (val) {
        //改变状态
        this.status = "login";
        this.ifPopShow = false;
        return;
      }
    },
    closePop() {
      this.ifPopShow = false;
    },
    displayPop() {
      //开启弹窗
      this.ifPopShow = true;
      //此时点击退出登录
      //退出登录统一执行以下操作
      if (this.status == "login") {
        //改变App组件topbar状态为未登录
        this.status = "unLogin";
        //cookie对象
        let cookie = new Cookie();
        //清空储存数据和cookie 恢复未登录状态
        sessionStorage.removeItem("login");
        sessionStorage.removeItem("username");
        sessionStorage.removeItem("password");
        cookie.clearAll();
      }
    }
  }
};
</script>

<style  scoped>
#app {
  width: 100%;
  min-width: 90rem;
  min-height: 100rem;
  background: #ebfaeb;
  position: relative;
  overflow: auto;
}
header {
  margin-top: 0.5rem;
  height: 4rem;

  /* background: chartreuse; */
}
main {
  width: 66.7rem;
  /* height: 54rem; */
  padding: 2rem 1.8rem;
  margin-bottom: 2rem;
  background: white;
  box-shadow: 1px 1px 3px #bfbfbf;
  overflow: hidden;
}
#layer {
  width: 100%;
  height: 100%;
  min-width: 90rem;
  min-height: 100rem;
  position: absolute;
  /* display:none; */
  left: 0;
  top: 0;
  z-index: 1;
  background: #595959;
  opacity: 0.5;
}
.pop {
  z-index: 2;
}
#topBar {
  width: 98.5%;
  padding-right: 1.5%;
  height: 1.8rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: rgb(84, 86, 82);

  /* position: absolute; */
  top: 0;
}
#topBar span a {
  color: rgb(213, 213, 213);
  cursor: pointer;
}
#topBar span:hover a {
  color: white;
}
</style>